import { Table } from 'antd';
import React from 'react';
import styles from './index.less';

const columns = [
  { title: '序号', dataIndex: 'key', key: 'key', width: 100 },
  { title: '数据源名称', dataIndex: 'name', key: 'name' },
];

const tableData = [
  {
    key: 1,
    name: '柴油消耗量(铲车消耗)',
    description: `已入地磅库电厂：
        五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
        未入地磅库电厂：
        绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 2,
    name: '柴油消耗量(铲车消耗)',
    description: `已入地磅库电厂：
          五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
          未入地磅库电厂：
          绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 3,
    name: '柴油消耗量(铲车消耗)',
    description: `已入地磅库电厂：
          五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
          未入地磅库电厂：
          绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
  {
    key: 4,
    name: '柴油消耗量(铲车消耗)',
    description: `已入地磅库电厂：
          五华电厂、荥阳电厂、汉口电厂、连云港电厂、长春电厂、西山电厂、八方电厂、银川电厂
          未入地磅库电厂：
          绥化电厂、温岭电厂、松原电厂、高密电厂、七台河电厂、唐山电厂、林州电厂、乐亭电厂`,
  },
];

export default function RightThirdTable(props) {
  const { height } = props;
  const newHeight = height - 160;

  return (
    <div className={styles.root}>
      <Table
        columns={columns}
        expandable={{
          expandedRowRender: record => (
            <p style={{ margin: 0 }}>{record.description}</p>
          ),
          rowExpandable: record => record.name !== 'Not Expandable',
        }}
        dataSource={tableData}
        scroll={{ x: '100%', y: newHeight }}
        pagination={false}
      />
    </div>
  );
}
